<!--
 * @Author: 刘程琳 2796055305@qq.com
 * @Date: 2025-09-11 08:37:06
 * @LastEditors: 刘程琳 2796055305@qq.com
 * @LastEditTime: 2025-09-17 14:47:25
 * @FilePath: \23信算前端\city\src\pages\components\Left1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        
        <!-- 提供图表容器  ref模版引用类似id-->
        <div ref="bottom1" style="height:150px;margin-top: 10px;"></div>
    </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
import {  Column } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '服务事项概览',

            // 存放温度数据
            sveDate: [],

        }
    },

    methods: {
        //封装加载折线图图表函数
        loadPie() {
            const data = [
                { type: '1-3秒', value: 0.16 },
                { type: '4-10秒', value: 0.125 },
                { type: '11-30秒', value: 0.24 },
                { type: '31-60秒', value: 0.19 },
                { type: '1-3分', value: 0.22 },
                { type: '3-10分', value: 0.05 },
                { type: '10-30分', value: 0.01 },
                { type: '30+分', value: 0.015 },
            ];

            const paletteSemanticRed = ' orange';
            const brandColor = 'pink';
            const columnPlot = new Column(this.$refs.bottom1, {
                data,
                xField: 'type',
                yField: 'value',
                seriesField: '',
                xAxis: {
                    label: {
                        
                        style: {
                            fill: "white",
                            fontSize: 16
                        }
                    }
                },
                // 配置y轴字段对象 
                yAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 16
                        }
                    }
                },
                color: ({ type }) => {
                    if (type === '1-3分' || type === '30+分'|| type === '11-30秒') {
                        return paletteSemanticRed;
                    }
                    return brandColor;
                },
                label: {
                    style: {
                    color: 'red',
                    fontSize: 16
                },
                
                    content: (originData) => {
                        const val = parseFloat(originData.value);
                        if (val < 0.05) {
                            return (val * 100).toFixed(1) + '%';
                        }
                    },
                    offset: 10,
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: 'red',
                            color: "white",
                            fontSize: 20
                        }
                    }
                },
                legend: false,
                xAxis: {
                    label: {
                        autoHide: true,
                        autoRotate: false,
                    },
                },
            });

            columnPlot.render();
        }
           
    },
    


    //最早获取dom元素的生命周期 图表渲染dom元素 使用await就要在前面加上async
     mounted() {
        
        this.loadPie();
    }
}

</script>
<style lang="less" scoped></style>